<template>
	<u-navbar v-show="!isNew" title="济宁学生资助申请平台" left-icon-color="white" :placeholder="true" title-style="color:white"
		bgColor="#359FE3" :autoBack="true"></u-navbar>
	<u-navbar v-show="isNew" title="济宁学生资助申请平台" left-icon="" :placeholder="true" title-style="color:white"
		bgColor="#359FE3"></u-navbar>
	<view v-show="isNew" class="mt-3 p-2 w-80 mx-auto border border-gray-200">
		<u-steps current="0">
			<u-steps-item title="完善家长信息"></u-steps-item>
			<u-steps-item title="添加学生"></u-steps-item>
			<u-steps-item title="提交保存"></u-steps-item>
		</u-steps>
	</view>

	<view class="content">
		<uni-forms ref="formData" :modelValue="formData" label-position="top" :rules="rules">
			<uni-forms-item required label="家长姓名" name="fullname">
				<uni-easyinput type="text" confirmType="next" v-model="formData.fullname" />
			</uni-forms-item>
			<uni-forms-item required label="联系电话" name="telphone">
				<uni-easyinput type="number" confirmType="next" v-model="formData.telphone" />
			</uni-forms-item>
			<uni-forms-item required label="身份证号" name="idnumber">
				<uni-easyinput type="idcard" confirmType="next" v-model="formData.idnumber" />
			</uni-forms-item>
			<!-- <uni-forms-item label="银行卡号" name="bankCard">
				<uni-easyinput type="number" v-model="formData.bankCard" />
			</uni-forms-item> -->
		</uni-forms>
		<button size="default" type="primary" v-show="!isNew" @click="formSubmit">保存家长信息</button>
		<button size="default" type="primary" v-show="isNew" @click="saveAndNext">下一步</button>
	</view>
</template>

<script>
	import {
		saveParentInfo,
		queryParentInfo
	} from '@/api/login.js'
	import {
		isIdCardNo
	} from '@/utils/common/validation-methods.js'
	import lodashFull from '@/uni_modules/iRainna-lodash/js_sdk/js/lodash.full.min.js'
	const {
		isNil
	} = lodashFull()

	export default {
		data() {
			return {
				isNew: false,
				formData: {
					fullname: '',
					telphone: '',
					idnumber: ''
				},
				rules: {
					fullname: {
						rules: [{
							required: true,
							errorMessage: '请填写姓名！'
						}]
					},
					telphone: {
						rules: [{
							required: true,
							errorMessage: '请填写联系电话！'
						}]
					},
					idnumber: {
						rules: [{
								required: true,
								errorMessage: '请填写身份证号！'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									return isIdCardNo(value)
								},
								errorMessage: '身份证号格式有误！'
							}
						]
					}
				}
			}
		},
		onLoad(option) {
			this.isNew = JSON.parse(option.isNew)
			queryParentInfo().then(res => {
				if (res.success && !isNil(res.eParent)) {
					const f = this.formData
					f.fullname = res.eParent.fullname
					f.idnumber = res.eParent.idnumber
					f.telphone = res.eParent.telphone
					// f.bankCard = res.eParent.bankCard
					this.formData = f
				}
			})
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			/**
			 * 直接提交家长信息
			 */
			formSubmit() {

				this.$refs.formData.validate().then(res => {
					saveParentInfo(this.formData).then(res => {
						if (res.success) {
							uni.showToast({
								title: res.msg,
								complete: () => {
									uni.navigateBack()
								}
							})
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})

			},
			/**
			 * 先将家长信息暂存到本地，然后跳转添加学生
			 */
			saveAndNext() {
				this.$refs.formData.validate().then(res => {
					uni.setStorageSync('parentInfo', this.formData)
					const parentInfo = uni.getStorageSync("parentInfo")
					uni.navigateTo({
						url: '/pages/studentInfo/studentInfo?isNew=' + this.isNew
					});
				}).catch(err => {
					console.log('表单错误信息：', err);
				})

			}
		}
	}
</script>

<style>
	.nav-title {
		font-size: 40rpx;
		width: 100%;
		text-align: center;
	}

	.content {
		padding: 40rpx;
	}
</style>